<template>
    <view class='ranking_box'>
        <view class='ranking_title'>{{convert(title)}}</view>
        <view class='ranking_content'>
            <view class='ranking_nav'>
                <view>排序</view>
                <view>站点</view>
                <view>{{itemTitle()}}</view>
            </view>
            <view class='ranking_list'>
                <view v-for='(list,i) in content' :key='i'>
                    <view>{{i+1}}</view>
                    <view><text>{{list.siteName?list.siteName:list.author}}</text></view>
                    <view>{{list.hot?list.hot:list.count}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            title: {
                type: String,
                default: ""
            },
            content:Array
        },
        data() {
            return {
                convert: this.$convert,
                itemTitle() {
                    switch(this.title) {
                        case "转发排行：": 
                            return "转发数"
                        break;
                        case "评论排行：": 
                            return "评论数"
                        break;
                        default :
                            return "次数"
                    }
                }
            }
        }
        
    }
</script>

<style lang="scss" scoped>
.ranking_box {
    width: 100%;
    font-size: 24upx;
    display: flex;
    flex-direction: column;
    .ranking_title {
        width: 100%;
        height: 70upx;
        padding-top: 20upx;
        box-sizing: border-box;
        color: #333;
        font-weight: 600;
    }
    .ranking_content {
        width: 100%;
        .ranking_nav {
            width: 100%;
            height: 58upx;
            display: flex;
            align-items: center;
            padding: 0 20upx;
            box-sizing: border-box;
            background: #F7F7F7;
            >view {
                flex: 1;
                height: 100%;
                display: flex;
                align-items: center;
                white-space: nowrap;
                &:nth-child(2) {
                    flex: 1.8;
                }
                &:nth-last-child(1) {
                    justify-content: flex-end;
                }
            }
            
        }
        .ranking_list {
            width: 100%;
            >view {
                width: 100%;
                height: 58upx;
                display: flex;
                align-items: center;
                padding: 0 20upx;
                box-sizing: border-box;
                &:nth-child(even) {
                    background: #F7F7F7;
                }
                &:nth-child(1),&:nth-child(2),&:nth-child(3) {
                    >view:nth-child(1) {
                        color: #D40E00;
                    }
                }
                >view {
                    flex: 1;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    &:nth-child(2) {
                        flex: 1.8;
                        >text {
                            width: 150upx;
                            display: block;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        
                    }
                    &:nth-last-child(1) {
                        width: 50upx;
                        justify-content: center;
                    }
                }
            }
        }
    }
}
</style>